/**
 * 付款类型 tab
 */
import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Popover, Badge } from 'antd'
import { messages } from "share/common"
import SlideFrameDetail from './expense-pay-type-detail'
import TableList from '../table-list'
import settingService from '../request-and-expense-settings.service'
import {batchOperations} from "components/template/wrapped-table-params/batch-operations";

class ExpensePayType extends Component {

  state = { extraParams: {} };
  slideFrameInfo = {
    title: messages('expense-7.key40')/*付款类型*/,
    content: SlideFrameDetail
  };

  searchForm = [{
    id: 'setOfBookId',
    dataIndex: 'setOfBookName',
    label: messages('expense-7.key34')/*所属组织*/,
    component: 'Chooser',
    props: {
      labelKey: 'setOfBooksName',
      valueKey: 'setOfBooksId',
      type: 'select_set_of_books',
      single: true
    }
  }];

  columns = [{
    title: messages('expense-7.key41')/*层级*/,
    dataIndex: 'levelCode',
    render: value => value === 'TENANT' ? messages('expense-7.key85')/*租户*/ : messages('expense-7.key42')/*帐套*/
  }, {
    title: messages('expense-7.key34')/*所属组织*/,
    dataIndex: 'levelOrgName',
    render: value => <Popover content={value} placement="topLeft">{value}</Popover>
  }, {
    title: messages('expense-7.key35')/*付款类型代码*/,
    dataIndex: 'classCode',
    render: value => <Popover content={value} placement="topLeft">{value}</Popover>
  }, {
    title: messages('expense-7.key37')/*付款类型名称*/,
    dataIndex: 'description',
    render: value => <Popover content={value} placement="topLeft">{value}</Popover>
  }, {
    title: messages('common.column.status')/*状态*/,
    dataIndex: 'enabled',
    width: '10%',
    render: value => (
      <Badge
        status={value ? 'success' : 'error'}
        text={value ? messages('common.status.enable')/*启用*/ : messages('common.status.disable')/*禁用*/}
      />
    )
  }];

  service = (page, size, searchParams) => {
    let tenantId = this.props.menuPermission.tenantId;
    let setOfBookId = undefined;
    if (searchParams.setOfBookId && searchParams.setOfBookId.length) {
      setOfBookId = searchParams.setOfBookId[0].id
    }
    let params = {
      tenantId,
      setOfBookId,
      typeCode: 'PAYMENT'
    };
    this.setState({ extraParams: params });
    return settingService.getPayTypeList(page, size, params);
  };

  render() {
    const { authPolicyAll } = this.props;
    const { extraParams } = this.state;
    let tableParams =  batchOperations({
      rowKey: 'id',
      hasAuthority: authPolicyAll
    }, [{
      type: 'ENABLE',
      service: settingService.batchOpenOrCloseExpensePayType,
      onOk: () => this.advancedTableRef.getList(),
      extraParams
    }, {
      type: 'DISABLE',
      service: settingService.batchOpenOrCloseExpensePayType,
      onOk: () => this.advancedTableRef.getList(),
      extraParams
    }], this);
    return (
      <div style={{ height: 'calc(100% - 32px)', marginTop: -16 }}>
        <TableList
          slideFrameInfo={this.slideFrameInfo}
          disabledEdit={!authPolicyAll}
          more={authPolicyAll ? '' : <div className="font-disabled">{messages('expense-7.key43')/*此规则仅租户管理员可 新建/编辑*/}</div>}
          afterClose={refresh => typeof refresh === 'boolean' && refresh && this.advancedTableRef.getList()}
          tableParams={{
            rowKey: 'id',
            searchForm: this.searchForm,
            columns: this.columns,
            service: this.service,
            onRef: ref => this.advancedTableRef = ref,
            ...tableParams
          }}
        />
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    menuPermission: state.main.menuPermission,
    authPolicyAll: state.main.authPolicyAll,
  }
}

export default connect(mapStateToProps)(ExpensePayType)
